.rui-input {
  border: none;
  color: $input-plaintext-color;
  padding: 0;
  width: 100%;

  &:focus {
    outline: none;
  }

  &:disabled {
    cursor: not-allowed;
  }
  &::placeholder{
    color: $input-placeholder-color
  }
}

.rui-input-wrapper > .rui-input-addon{
  color: $input-group-addon-color;
  background: $input-group-addon-bg;
  border: $input-border-width solid $input-group-addon-border-color;
  border-radius: $input-border-radius;
  display: inline-block;
  line-height: $input-line-height;
  @include component-size($input-padding-y, $input-padding-x, $input-font-size, $input-border-radius);
  &.rui-input-prepend{
    @include border-right-radius(0);
    border-right: none;
  }
  &.rui-input-append{
    @include border-left-radius(0);
    border-left: none;
  }
}

.rui-input-wrapper >  .rui-input-affix-wrapper {
  border: $input-border-width solid $input-border-color;
  box-shadow: $input-box-shadow;
  color: $input-color;
  transition: $input-transition;
  line-height: $input-line-height;
  display: inline-flex;
  flex:1;
  width: 100%;
  @include component-size($input-padding-y, $input-padding-x, $input-font-size, $input-border-radius);
  &:hover  {
    border-color: $input-focus-border-color;
  }

  &:focus-within {
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
    position: relative;
    z-index: 1;
  }

  &[aria-disabled='true'] {
    background: $input-disabled-bg;
    transition: $input-transition;
    border-color: $input-disabled-border-color;
    box-shadow: none;

    &:hover {
      border-color: $input-disabled-border-color;
    }
  }

}

.rui-input-wrapper >  .rui-input-affix-wrapper.rui-input-has-prepend{
  @include border-left-radius(0)
}

.rui-input-wrapper >  .rui-input-affix-wrapper.rui-input-has-append{
  @include border-right-radius(0)
}


.rui-input-wrapper-lg > .rui-input-affix-wrapper,
.rui-input-wrapper-lg > .rui-input-addon{
  @include component-size($input-padding-y-lg, $input-padding-x-lg, $input-font-size-lg, $input-border-radius-lg);
}

.rui-input-wrapper-sm > .rui-input-affix-wrapper,
.rui-input-wrapper-sm > .rui-input-addon {
  @include component-size($input-padding-y-sm, $input-padding-x-sm, $input-font-size-sm, $input-border-radius-sm);
}

.rui-input-wrapper {
  display: inline-flex;
  width: 100%;
  background: $input-bg;
  font-family: $input-font-family;
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  font-size: $input-font-size;
}

.rui-input-prefix {
  margin-right: $input-padding-x;
}

.rui-input-suffix {
  margin-left: $input-padding-x;
}



